<template>
  <div>
    <!-- 登录用户信息及下拉菜单 -->
    <a-popover placement="bottomRight">
      <template slot="content">
        <div class="home-msg-content">
          <div class="li"
               v-for="(item) in messageDataList"
               :key="item.id"
               :title="item.details"
               @click="jumpMsgMethod(item)">
            <div class="c1">
              <img v-if="item.appLogo && item.appLogo.indexOf('/')>-1"
                   :src="storage.baseURL+item.appLogo" />
              <a-icon class="icon"
                      v-if="item.appLogo && item.appLogo.indexOf('/')==-1"
                      style="font-size:32px"
                      :type="item.appLogo" />
              <img v-if="!item.appLogo"
                   :src="defaultImg">
            </div>
            <div class="c2">
              <p :style="{color:(item.readStatus==1?'rgba(31, 31, 31, 0.65)':'')}"
                 v-text="item.details"></p>
              <strong v-text="item.time"></strong>
            </div>
          </div>
          <a-empty v-if="messageDataList.length==0" />
          <br>
          <div class="allread" @click="markAllRead">全部已读</div>
        </div>
      </template>
      <template slot="title">
        <div class="home-msg-title">
          <div class="t1">
            <span>消息通知</span>
          </div>
          <a-icon title="更多"
                  class="gd"
                  @click="jumpMore()"
                  type="ellipsis" />
        </div>
      </template>
      <a-badge :dot="showmsgdot"
               :offset="[-4,3]">
        <a-icon type="bell" />
      </a-badge>
    </a-popover>
  </div>
</template>

<script>
import { Badge, Popover } from 'ant-design-vue'
import { editReadStatusOne, getMessagePage, editReadStatus } from '../api/message/MessageCenter'
import { messageQueryPage, markAllMsgRead } from '../api/message/index'
import defaultImg from '../assets/app-default.png'
import { storage } from '@zh/common-utils/http'
import storageToken from '@zh/common-utils/utils/storage'
export default {
  components: { Badge, Popover },
  props: {},
  data () {
    return {
      defaultImg: defaultImg,
      storage,
      showmsgdot: false,
      messageDataList: []
    }
  },
  computed: {},
  created () {
    this.userMessageDataListLoad()
  },
  methods: {
    /**
     * 全部标记已读
     */
    markAllRead () {
      editReadStatus({}).then(res => {
        this.showmsgdot = false
        this.message.info('全部已读成功')
      })
    },
    userMessageDataListLoad () {
      getMessagePage({
        currPage: 1,
        pageSize: 5
      }).then((res) => {
        this.messageDataList = res.list
        if (!!res.list && res.list.length > 0) {
          for (let i = 0; i < res.list.length; i++) {
            if (res.list[i].readStatus == '2') {
              this.showmsgdot = true
              return
            }
          }
        }
      })
    },
    jumpMore () {
      this.$router.push('/message-center')
    },
    // jumpMsgMethod (item) {
    //   this.$router.push(
    //     '/message-center/detail' +
    //     (!item
    //       ? ''
    //       : '?msgId=' + item.msgId + '&insideMsgId=' + item.insideMsgId)
    //   )
    // }
    // 跳转详情
    jumpMsgMethod (item) {
      item.category = item.messageType == '3' ? '2' : '1'
      if (item.readStatus == '2') {
        editReadStatusOne(item.insideMsgId).then((res) => {
          this.userMessageDataListLoad()
        })
      }
      let msgJson = JSON.parse(item.msg)
      const token = storageToken.getToken()?.value || ''
      let target = msgJson.action_card?.single_pc_url
      if (item.category == '1') {
        this.$router.push(target)
      } else {
        if (!item.ssoLoginUrl) {
          let text = this.$router.resolve({
            path: target
          })
          // 打开一个新的页面
          window.open(text.href, '_blank')
          return
        }
        window.open(
          `${item.ssoLoginUrl}?targetUrl=${encodeURIComponent(
            target
          )}&token=${token}`
        )
      }
      // if (item.category == '1') {
      //   this.$router.push(target)
      // } else {
      //   window.open(
      //     `${item.ssoLoginUrl}?targetUrl=${encodeURIComponent(target)}&token=${storageToken.getToken().value
      //     }`
      //   )
      // }
    }
  }
}
</script>

<style lang="less" scoped>
/* 消息中心 */

.home-msg-title {
  height: 30px;
  line-height: 30px;
  font-size: var(--font-size-16);
  width: 300px;
  .t1 {
    vertical-align: top;
    float: left;
    text-align: left;
    span {
      display: inline-block;
      font-size: 16px;
      color: rgba(31, 31, 31, 0.65);
      vertical-align: top;
    }
  }
  .gd {
    float: right;
    margin-right: 15px;
    width: 20px;
    font-size: 30px;
    color: rgba(31, 31, 31, 0.65);
    &:hover {
      cursor: pointer;
    }
  }
}
.home-msg-content {
  width: 300px;
  margin: 0 0 10px 0;
  .allread {
    text-align: center;
    cursor: pointer;
    color: #1890ff;
  }
  .li {
    border-bottom: 1px dashed #ddd;
    margin-bottom: 6px;
    &:hover {
      cursor: pointer;
    }
    .c1 {
      float: left;
      width: 30px;
      line-height: 40px;
      img {
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        margin-right: 5px;
      }
      .icon {
        display: inline-block;
        margin-right: 5px;
      }
    }
    .c2 {
      width: 100%;
      p {
        text-indent: 5px;
        display: inline-block;
        vertical-align: middle;
        width: 88%;
        font-size: 14px;
        color: rgba(31, 31, 31, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      strong {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        color: #ccc;
        font-weight: normal;
        margin: 0 0 6px 6px;
      }
    }
  }
}
</style>